<template>
  <body>
    <!--头部-->
    <div class="main">
      <div class="main-content">
        <div class="container-fluid">
          <div class="headarea">
            <div class="headarea-1">
              <span>患者姓名：</span>
              <input
                type="text"
                name="search"
                class="input-1"
                v-model="SearchName"
              />
              <span>电话：</span>
              <input
                type="text"
                name="search"
                class="input-1"
                v-model="SearchTel"
              />
            </div>
            <el-button type="primary" @click="search">查询</el-button>
            <!-- <el-button type="primary" @click="reset">重置</el-button> -->
            <el-button type="primary" class="btn" @click="btnOut"
              >导出
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!--表格-->
    <div class="panel">
      <div class="pd10">
        <el-table :data="store.state.patientList.tableData" style="width: 100%">
          <el-table-column label="序号" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.bankId }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="更新日期" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{
                  scope.row.updateTime
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="患者姓名" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.bankName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.sex }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="年龄" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.age }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="电话" width="180">
            <template #default="scope">
              <el-popover
                effect="light"
                trigger="hover"
                placement="top"
                width="auto"
              >
                <template #default>
                  <div>name: {{ scope.row.age }}</div>
                  <div>address: {{ scope.row.phone }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.phone }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="200"
            #default="scope"
          >
            <el-button
              type="danger"
              size="small"
              @click="
                centerDialogVisible = false;
                upddateDrug(scope.row);
              "
              >修改</el-button
            >
            <!--  <el-button type="danger" size="small" @click="updateData(scope.row)"
              >编辑</el-button
            > -->

            <el-button
              type="primary"
              size="small"
              @click="
                centerDialogVisible = false;
                deleteDrug(scope.row);
              "
              >删除</el-button
            >
          </el-table-column>
        </el-table>
        <div></div>
      </div>
    </div>
  </body>
  <!--分页-->
  <div class="example-pagination-block">
    <el-pagination
      v-model:page-size="pageSize"
      @current-change="pageChange"
      layout="prev, pager, next"
      :total="store.state.patientList.tableTotal"
    />
  </div>
  <!-- 删除弹窗 -->
  <!-- <el-dialog v-model="centerDialogVisible" width="30%" center>
    <span> 确认删除吗？ </span>
    <template #footer #default="scope">
      <span class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary"> 确认 </el-button>
      </span>
    </template>
  </el-dialog> -->

  <!-- —————————————————— 修改弹框 —————————————————— -->
  <divs> </divs>
  <!-- 头部 -->
  <el-dialog
    id="update"
    :fullscreen="true"
    v-model="dialogFormVisible"
    title="修改患者信息"
  >
    <header id="header">
      <!-- 头部左边 -->
      <div class="headerLeft">
        <div @click="patient">患者存档</div>
        <div @click="history">历史病历</div>
      </div>

      <!-- 头部右边 -->
      <div class="headerRight">
        <div @click="returnList">返回</div>
        <div @click="save">保存</div>
      </div>
    </header>

    <!-- 患者存档信息 -->
    <div v-if="flog">
      <el-form
        ref="ruleFormRef"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <!-- 表单上面部分 -->
        <el-row>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="姓名：" prop="name" style="width: 300px">
              <el-input v-model="form.name" /> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple-light" />
            <el-form-item label="性别：" prop="region">
              <el-select v-model="form.region" placeholder="性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="身高：" prop="name" style="width: 300px">
              <el-input v-model="form.aa" /> </el-form-item
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple-light" />
            <el-form-item label="体重：" prop="name" style="width: 300px">
              <el-input v-model="form.cc" />
            </el-form-item>
          </el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="血型：" prop="region">
              <el-select v-model="form.blood" placeholder="血型">
                <el-option label="AB " />
                <el-option label="A" />
                <el-option label="B" />
                <el-option label="C" />
                <el-option label="O" />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="血型类型：" prop="" style="width: 300px">
              <el-input v-model="form.bb" /> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="左耳听力：" prop="region">
              <el-select v-model="form.earr" placeholder="左耳听力">
                <el-option label="正常" value="正常" />
                <el-option label="耳聋" value="耳聋" />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple-light" />
            <el-form-item label="右耳听力：" prop="region">
              <el-select v-model="form.ear" placeholder="左耳听力">
                <el-option label="正常" value="正常" />
                <el-option label="耳聋" value="耳聋" />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="左眼视力：" prop="name" style="width: 300px">
              <el-input v-model="form.dd" /> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple-light" />
            <el-form-item label="右眼视力：" prop="name" style="width: 300px">
              <el-input v-model="form.ff" /> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="电话：" prop="name" style="width: 300px">
              <el-input v-model="form.gg" /> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple-light" />
            <el-form-item label="身份证号" prop="name" style="width: 300px">
              <el-input v-model="form.ee" /> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="住址：" prop="name" style="width: 300px">
              <el-input v-model="form.rr" /> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="紧急联系人：" prop="name" style="width: 300px">
              <el-input v-model="form.tt" /> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple-light" />
            <el-form-item label="联系电话" prop="name" style="width: 300px">
              <el-input v-model="form.yy" /> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="关系：" prop="region">
              <el-select v-model="form.relationship">
                <el-option label="爸爸" value="爸爸" />
                <el-option label="妈妈" value="妈妈" />
                <el-option label="儿子" value="儿子" />
                <el-option label="女儿" value="女儿" />
                <el-option label="亲戚" value="亲戚" />
                <el-option label="朋友" value="朋友" />
              </el-select> </el-form-item
          ></el-col>
        </el-row>

        <el-form-item label="生日：" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                v-model="form.date1"
                type="date"
                label="Pick a date"
                placeholder="Pick a date"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col class="text-center" :span="2">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                v-model="form.date2"
                label="Pick a time"
                placeholder="Pick a time"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>

      <br />
      <br />
      <br />
      <!-- 表单下面部分 -->
      <h3 style="color: rgb(66, 155, 255) !important">过敏史</h3>
      <el-input
        v-model="form.guomin"
        maxlength="30"
        show-word-limit
        type="textarea"
      />
      <h3 style="color: rgb(66, 155, 255) !important">个人史</h3>
      <el-input
        v-model="form.geren"
        maxlength="30"
        show-word-limit
        type="textarea"
      />
      <h3 style="color: rgb(66, 155, 255) !important">家族史</h3>
      <el-input
        v-model="form.jiazu"
        maxlength="30"
        show-word-limit
        type="textarea"
      />
    </div>

    <!-- 历史病历信息 -->
    <div class="box" v-show="another">
      <div class="box-1">
        <div>
          <h3 style="color: rgb(66, 155, 255); font-size: 16px; padding: 5px">
            病例
          </h3>
          <span class="box-2">2023-02-17 15:34 源码力量云诊所 - 院长A</span>
        </div>
      </div>

      <div class="box-3">
        <div>
          <h3 style="color: rgb(66, 155, 255); font-size: 20px">诊断信息</h3>
        </div>
        <div class="btnn">
          <span class="btnn">发病日期:</span>
          <el-input
            v-model="datetime"
            disabled
            placeholder="2023-02-17"
            style="width: 200px"
          />
        </div>

        <div class="btnn">
          <span>接诊类型:</span>
          <el-input
            v-model="first"
            disabled
            placeholder="初诊"
            style="width: 300px"
          />
        </div>

        <div class="btnn">
          <span>是否传染:</span>
          <el-input
            v-model="infect"
            disabled
            placeholder="否"
            style="width: 200px"
          />
        </div>

        <div>
          <span class="btnn2">主诉:</span>
          <el-input
            v-model="complain"
            class="btn3"
            disabled
            placeholder="否"
            style="width: 800px"
          />
          <!-- <el-input v-model="complain" /> -->
        </div>
        <div>
          <h3 style="color: rgb(66, 155, 255) !important">家族史</h3>
          <div style="margin: 20px 0" />
          <el-input
            v-model="family"
            maxlength="30"
            placeholder="Please input"
            show-word-limit
            type="textarea"
          />
        </div>
      </div>
    </div>
  </el-dialog>
</template>
  
  <script lang="ts">
import { reactive, ref, onBeforeMount, onMounted } from "vue";
import axios from "@/utils/http";
import { useRouter } from "vue-router";
import { useStore, mapMutations } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

const SearchName = ref("");
const SearchTel = ref("");

export default {
  setup() {
    const store = useStore();
    //实例化路由
    const router = useRouter();
    function goto() {
      router.push({
        path: "/treat/patientEdit",
      });
    }

    // 删除弹窗
    const centerDialogVisible = ref(false);

    // 定义要渲染到页面的初始数据
    const app = ref("");
    const add = ref("");
    const tableData = ref("");
    const data: any = ref("");
    const pageSize = ref(10);
    const setData = mapMutations(["setData"]).setData.bind({
      $store: store,
    });
    //分页接口
    onBeforeMount(() => {
      //----------------------真实接口
      setData({ currentPage: 1, PageSize: pageSize.value });
    });

    const pageChange = (CurrentPage: any) => {
      setData({ CurrentPage: CurrentPage, pageSize: pageSize.value });
    };

    /* —————————————————————— 查询 —————————————————————— */
    const search = () => {
      console.log("点击查询");
      //发请求
      axios({
        url: "/seeDoctor/bank/queryBank",
        method: "get",
        params: {
          bankName: SearchName.value,
          phone: SearchTel.value,
          CurrentPage: 0,
          PageSize: 0,
        },
      })
        .then((res) => {
          console.log("data", res.data.data);
          store.state.patientList.tableData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    };

    /* —————————————————————— 重置 —————————————————————— */
    // let reset = () => {
    //   console.log("点击了重置");
    //   setData()
    // };

    /* ———————————————————— 删除数据 —————————————————————— */
    const deleteDrug = (row: any) => {
      console.log("row", row.bankId);

      ElMessageBox.confirm("确认删除本条数据?", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //点击确定发请求
          axios({
            url: "/seeDoctor/bank/deleteBank",
            method: "post",
            params: {
              bankId: row.bankId,
            },
          })
            .then((res) => {
              console.log(res);

              //删除成功
              if (res.data.code == 200) {
                ElMessage({
                  type: "success",
                  message: "删除成功",
                });
              }
              //重新渲染数据
              setData({ currentPage: 1, PageSize: pageSize.value });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "Delete canceled",
          });
        });
    };

    /* ———————————————————— 修改数据 ———————————————————— */
    let patientData = [{}];

    //患者存档
    const formSize = ref("default");
    const ruleFormRef = ref<FormInstance>();
    const dialogFormVisible = ref(false);
    const formLabelWidth = "140px";

    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log("submit!");
        } else {
          console.log("error submit!", fields);
        }
      });
    };

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    const options = Array.from({ length: 10000 }).map((_, idx) => ({
      value: `${idx + 1}`,
      label: `${idx + 1}`,
    }));

    /* ———————————————————————————— 修改数据函数 —————————————————————————— */
    const form = reactive({
      name: "", //患者名字
      aa: "", //
      bb: "",
      cc: "",
      dd: "",
      ff: "",
      gg: "",
      ee: "",
      rr: "",
      tt: "",
      yy: "",
      blood: "",
      earr: "",
      guomin: "",
      geren: "",
      jiazu: "",
      ear: "",
      relationship: "",
      region: "",
      count: "",
      date1: "",
      date2: "",
      // delivery: false,
      type: [],
      resource: "",
      desc: "",
      numr: "",
    });

    /* 点击修改函数 */
    let clickId: { value: any };
    let upddateDrug = (row: any) => {
      clickId = row.bankId;
      console.log("点击了修改", row.bankId);
      dialogFormVisible.value = true;
      //修改框里的数据
      console.log(axios);

      axios({
        url: "/seeDoctor/bank/updateBanks",
        method: "get",
        params: {
          bankId: row.bankId,
        },
      })
        .then((res) => {
          console.log("要修改的信息", res.data.data);
          // console.log('关联信息',res.data.data.patient);

          for (let i = 0; i < res.data.data.length; i++) {
            //显示数据
            form.name = res.data.data[i].bankName; //名字
            form.region = res.data.data[i].sex; //性别
            form.ee = res.data.data[i].idNumber; //身份证
            form.gg = res.data.data[i].patient.phone; //电话
            form.rr = res.data.data[i].address; //地址
            form.date1 = res.data.data[i].birthday; //生日
            (form.guomin = res.data.data[i].persionHistory), //过敏史
              (form.relationship = res.data.data[i].patient.bear), //关系
              (form.date1 = res.data.data[i].birthday); //生日
            form.blood = res.data.data[i].patient.blood; //血型
            form.bb = res.data.data[i].patient.bloodType; //血型类型
            form.tt = res.data.data[i].patient.contact; //紧急联系人电话
            (form.jiazu = res.data.data[i].patient.familyHistory), //家族史
              (form.aa = res.data.data[i].patient.height); //身高
            form.dd = res.data.data[i].patient.leftVision; //左眼
            form.ff = res.data.data[i].patient.rightVision; //左眼
            form.earr = res.data.data[i].patient.leftEar; //左耳
            form.ear = res.data.data[i].patient.rightEar; //左耳
            form.cc = res.data.data[i].patient.height; //体重
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };

    let flog = ref(true); //患者信息
    //患者存档
    let patient = () => {
      console.log("点击了患者存档");
      flog.value = true;
      another.value = false;
    };

    //历史病历
    let another = ref(false); //历史病历
    let datetime = ref("");
    let first = ref("");
    let infect = ref("");
    let complain = ref("");
    let family = ref("");
    let history = () => {
      console.log("点击了历史病历");
      flog.value = false;
      another.value = true;
    };

    /* ——————————————————————————————————— 发请求保存数据 ———————————————————————————————— */

    //修改后点击保存
    let save = () => {
      console.log(
        form.name, //患者姓名
        form.rr, //地址
        form.guomin, //过敏史

        form.relationship, //关系
        form.date1, //生日
        form.blood, //血型
        form.bb, //血型类型
        form.tt, //紧急联系人电话

        form.jiazu, //家族史
        form.aa, //身高
        form.ee, //身份证
        form.dd, //左眼视力
        form.earr, //左耳听力
        form.geren, //个人史
        form.gg, //电话
        form.ff, //右眼视力
        form.ear, //右耳听力
        form.region, //性别
        form.cc //体重
      );

      axios({
        url: "/seeDoctor/bank/updateBank",
        method: "post",
        params: {
          bankId: clickId,
          bankName: form.name, //患者姓名
          sex: form.region, //性别
          address: form.rr, //地址
          allergicHistory: form.guomin, //过敏史
          bear: form.relationship, //关系
          birthday: form.date1, //生日
          blood: form.blood, //血型
          bloodType: form.bb, //血型类型
          cPhone: form.tt, //紧急联系人电话
          familyHistory: form.jiazu, //家族史
          height: form.aa, //身高
          idNumber: form.ee, //身份证
          leftEar: form.dd, //左眼视力
          leftVision: form.earr, //左耳听力
          persionHistory: form.geren, //个人史
          phone: form.gg, //电话
          rightEar: form.ff, //右眼视力
          rightVision: form.ear, //右耳听力
          weight: form.cc, //体重
        },
      })
        .then((res) => {
          console.log("修改的数据", res.data);
          if (res.data.code == 200) {
            dialogFormVisible.value = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };

    /* —————————————————————— 导出 —————————————————————————— */

    let btnOut = () => {
      console.log("点击了导出");

      axios({
        url: "/seeDoctor/bank/induceBank",
        method: "get",
        params: {
          CurrentPage: 0,
          PageSize: 10,
        },
      })
        .then((res) => {
          console.log(res.data);
          //如果code = 200 ，导出成功，导入到服务器端
          if (res.data.code) {
            ElMessage({
              message: "导出成功",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };

    /* —————————————————————— 返回主页面 —————————————————————————— */
    let returnList = () => {
      console.log("点击了返回功能");
      //关闭修改框
      dialogFormVisible.value = false;
    };

    // 暴露方法到页面上
    return {
      pageSize,
      pageChange,
      store,
      tableData,
      centerDialogVisible,
      goto,
      // deleteDrug,

      //查询
      search,
      SearchName,
      SearchTel,
      //重置
      // reset,
      //删除
      deleteDrug,
      //修改
      upddateDrug,
      patientData,
      dialogFormVisible,
      formLabelWidth,
      //患者存档
      form,
      formSize,
      ruleFormRef,
      resetForm,
      options,
      history,
      patient,
      flog,
      //历史病历
      another,
      datetime,
      first,
      infect,
      complain,
      family,
      //修改拿数据
      save,
      //返回主页面
      returnList,
      //导出
      btnOut,
    };
  },
};
</script>
  
  <style lang="less" scoped>
.example-pagination-block {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
body {
  font-family: "sans-serif";
  font-size: 15px;
  color: #676a6d;
}
.main-content {
  padding: 28px 10px;
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.headarea {
  padding: 10px;
  margin-bottom: 20px !important;
  font-family: "sans-serif";
  font-size: 15px;
  color: #676a6d;
  margin: 0 0 20px;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}
.headarea-1 {
  position: relative;
  display: inline-block;
  margin-right: 10px !important;
}
.input-1 {
  width: auto;
  display: inline-block;
  /* border-radius: 2px; */
  /* border-color: #eaeaea;
      background-color: #fcfcfc; */
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1;
  color: #555;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.btn {
  float: right;
}
fieldset {
  width: 40%;
  margin-left: 10%;
  margin-top: 30px;
}

/* 修改弹框 */

/* 修改弹框的头部 */

// .el-dialog {
//   width:80%;
// }
#header {
  width: 100%;
  height: 70px;
  border: 2px solid rgb(240, 236, 236);
  min-width:800px ;
}

/* 头部左边 */
.headerLeft {
  float: left;
  width: 23%;
  height: 100%;
  /*  ; */
}

.headerLeft > div {
  width: 128px;
  float: left;
  text-align: center;
  margin: auto;
  height: 40px;
  line-height: 40px;
  background: white;
  margin-top: 15px;
  border: 2px solid rgb(212, 209, 209);
  font-size: 20px;
}

.headerLeft > div:nth-of-type(1) {
  background: #00a0f0;
  border: 2px solid black;
  color: white;
}

/* 头部右边 */
.headerRight {
  float: right;
  width: 21%;
  height: 100%;
 
  /*  ; */
}

.headerRight > div {
  width: 128px;
  float: left;
  text-align: center;
  margin: auto 5px;
  height: 40px;
  line-height: 40px;
  background: white;
  margin-top: 15px;
  border: 2px solid rgb(212, 209, 209);
  font-size: 20px;
}

.headerRight > div:nth-child(2) {
  background: rgb(135, 195, 235);
}
/* 表单 */
.el-form-item {
  float: left;
}

.el-form {
  margin: 20px;
}

/* 历史病历 */

.box {
}
.btnn {
  font-size: 14px;
  font-weight: 400;
  float: left;
  margin: 0px 22px;
  line-height: 1.42857143;
}

.btnn2 {
  margin: 20px 45px;
  /*  ; */
}

.btn3 {
  margin: 20px -20px;
}

.box-1 {
  margin: 20px 0;
  width: 24%;
  height: 740px;
  background: #f8f8f8;
  float: left;
  cursor: pointer;
  overflow-y: auto;
}
.box-2 {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.box-3 {
  margin: 20px 0;
  width: 74%;
  float: left;
  /*  ; */
}
</style>
  